<template>
  <div class="app-center-page">
    <!-- Banner Section -->
    <div class="app-banner">
      <img src="@/assets/app-center/banner.png" alt="Application Center Banner">
      <div class="banner-text">
        <h1>应用中心</h1>
        <p>提供精选应用与服务，助力企业上云转型</p>
      </div>
    </div>

    <!-- Content Section -->
    <div class="app-content" v-if="false" >
      <!-- Title Section -->
      <div class="app-title">
        <p class="title-text">热门应用</p>
      </div>

      <!-- Carousel Section -->
      <div class="app-carousel">
        <button class="carousel-arrow left" @click="prevSlide">‹</button>

        <div class="carousel-container">
          <div class="carousel-track" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
            <div class="app-card" v-for="(app, index) in apps" :key="index">
              <!-- Hot tag in top right corner -->
              <div class="hot-tag">
                <img class="red-right" src="@/assets/app-center/red-right.svg" alt="Red Tag">
                <img class="hot-text" src="@/assets/app-center/hot-text.svg" alt="Hot">
              </div>

              <div class="app-icon">
                <img :src="app.icon" :alt="app.name">
              </div>
              <h3 class="app-name">{{ app.name }}</h3>
              <p class="app-description">{{ app.description }}</p>
              <button class="app-button" @click="goToDetail(app.id)">立即开通</button>
            </div>
          </div>
        </div>

        <button class="carousel-arrow right" @click="nextSlide">›</button>
      </div>
    </div>


    <appFastLink></appFastLink>


      <!-- New Tabs Section -->
      <div class="app-tabs-container" v-if="false" >
        <div class="app-tabs">
          <div
              class="tab-item"
              v-for="tab in tabs"
              :key="tab.id"
              :class="{ 'active': activeTab === tab.id }"
              @click="activeTab = tab.id"
          >
            {{ tab.name }}
          </div>
        </div>
        <div class="tab-line"></div>
      </div>

      <!-- New Card Grid Section -->
    <div class="app-grid"  v-if="false">
      <div class="grid-card" v-for="(item, index) in filteredGridItems" :key="index">
        <div class="grid-icon">
          <img :src="item.icon" :alt="item.title">
        </div>
        <div class="grid-content">
          <h3 class="grid-title">{{ item.title }}</h3>
          <p class="grid-description">{{ item.description }}</p>
          <button class="grid-button" @click="goToDetail">立即开通</button>
        </div>
      </div>
    </div>
    <contact-footer></contact-footer>
  </div>
</template>
<script>

import ContactFooter from "@/view/homeComponents/banner.vue";
import appFastLink from  "@/view/appCenterComponents/appFastLink.vue";

export default {
  name: 'AppCenter',
  components: {ContactFooter,appFastLink},
  data() {
    return {
      currentSlide: 0,
      activeTab: 1, // Default to first tab (全部分类)
      tabs: [
        { id: 1, name: '全部分类' },
        { id: 2, name: '研发设计' },
        { id: 3, name: '采购供应' }
      ],
      apps: [
        {
          id: 1,
          name: '供应链协同',
          description: '供应链系统和生产系统精准对接和人、机、物全面互联',
          icon: require('@/assets/app-center/gylxt.svg')
        },
        {
          id: 2,
          name: 'CRM客户管理',
          description: '高效的客户关系管理平台',
          icon: require('@/assets/app-center/jngl.svg')
        },
        {
          id: 3,
          name: '售后管理',
          description: '有效提升用户体验满意度，提高企业服务水平',
          icon: require('@/assets/app-center/shgl.svg')
        },
        {
          id: 4,
          name: '设备管理',
          description: '运用标识解析技术，建立统一的设备数字化模式',
          icon: require('@/assets/app-center/sbgl.svg')
        },
        {
          id: 5,
          name: '生产管理',
          description: '生产过程的全面数字化管理',
          icon: require('@/assets/app-center/scgl.svg')
        },
        {
          id: 6,
          name: '数据分析平台',
          description: '强大的商业智能分析工具',
          icon: require('@/assets/app-center/u1245.svg')
        },
        {
          id: 7,
          name: '项目管理',
          description: '高效协同的项目管理解决方案',
          icon: require('@/assets/app-center/u1245.svg')
        },
        {
          id: 8,
          name: '办公协同',
          description: '企业级即时通讯与协作平台',
          icon: require('@/assets/app-center/u1245.svg')
        }
      ],
      gridItems: [
        {
          id: 1,
          title: '供应链协同',
          description: '实现供应链系统和企业生产系统精准对接和人、机、物全面互联，进而实现跨企业、跨地区、跨行业的产品全生命周期的管理，促进信息资源的集成共享',
          icon: require('@/assets/app-center/gylxt.svg'),
          categoryId: 3 // 采购供应
        },
        {
          id: 2,
          title: '生产管理',
          description: '轻量级MES，从生产计划制定、到生产任务派发，再到生产工序管控，最后到生产过程管理',
          icon: require('@/assets/app-center/scgl.svg'),
          categoryId: 4 // 生产制造
        },
        {
          id: 3,
          title: '售后管理',
          description: '通过方便快捷多样的报修方式，有效提升用户体验满意度，提高企业服务水平，同时收集售后服务数据，有利于优化产品质量。可利用表单配置方式实现产品功能满足不同客户的需求。',
          icon: require('@/assets/app-center/shgl.svg'),
          categoryId: 5 // 售后服务
        },
        {
          id: 4,
          title: '设备管理',
          description: '运用标识解析技术，建立统一的设备数字化模式，通过设备资产数字化管理云平台和企业数字化管理系统看板，轻松实现资产管理。',
          icon: require('@/assets/app-center/sbgl.svg'),
          categoryId: 2 // 研发设计
        },
        {
          id: 5,
          title: 'Dataphin智能数据构建与管理',
          description: '面向各行各业大数据建设、管理及应用诉求, 一站式提供从数据接入到数据消费全链路的智能数据构建与管理的大数据能力。',
          icon: require('@/assets/app-center/u1245.svg'),
          categoryId: 2 // 研发设计
        },
        {
          id: 6,
          title: '节能管理',
          description: '验证节能管理有效性，挖掘洞察技术、经济、市场、政策等方面的企业节能成效驱动因素，提升城市节能领域综合治理水平。',
          icon: require('@/assets/app-center/jngl.svg'),
          categoryId: 4 // 生产制造
        }
      ]
    }
  },
  computed: {
    filteredGridItems() {
      if (this.activeTab === 1) { // 全部分类 shows all
        return this.gridItems;
      }
      return this.gridItems.filter(item => item.categoryId === this.activeTab);
    }
  },
  methods: {
    prevSlide() {
      this.currentSlide = Math.max(0, this.currentSlide - 1)
    },
    nextSlide() {
      const maxSlides = Math.ceil(this.apps.length / 4) - 1
      this.currentSlide = Math.min(maxSlides, this.currentSlide + 1)
    },
    goToDetail() {
      this.$router.push({name:'AppCenterDetail'})
    }
  }
}
</script>

<style scoped>
.app-center-page {
  width: 100%;
}

/* Banner Styles */
.app-banner {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.app-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 10%; /* Changed from 50% to 10% for left alignment */
  transform: translateY(-50%); /* Removed X-axis translation */
  text-align: left; /* Changed from center to left */
  width: 80%; /* Adjusted width to prevent text from touching edges */
  max-width: 1200px; /* Added max-width for better control on large screens */
  padding-left: 20px; /* Added some padding */
}

.banner-text h1 {
  font-size: 44px;
  color: #000;
  margin: 0 0 10px 0;
  font-weight: normal;
}

.banner-text p {
  font-size: 28px;
  color: #666;
  margin: 0;
}


/* Content Area Styles */
.app-content {
  height: 630px;
  background-image: url('@/assets/app-center/content-img.png');
  background-size: cover;
  background-position: center;
  padding: 40px 0;
}

.app-title {
  width: 1200px;
  height: 120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.app-title p {
  font-size: 36px;
  //font-weight: bold;
  color: #333;
  margin: 0;
}

/* Carousel Styles */
.app-carousel {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  top: 50px;
  display: flex;
  align-items: center;
}

.carousel-arrow {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-arrow.left {
  left: -60px;
}

.carousel-arrow.right {
  right: -60px;
}

.carousel-container {
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.app-card {
  width: calc(20% - 30px);
  min-width: calc(20% - 30px);
  background: white;
  margin: 0 15px;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Hot Tag Styles */
.hot-tag {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 70px;
}

.red-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.hot-text {
  position: absolute;
  top: 15px;
  right: 10px;
  width: 30px;
  height: 30px;
  z-index: 2;
}

.app-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  margin-top: 10px;
}

.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.app-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.app-description {
  font-size: 16px;
  color: #999999;
  margin-bottom: 25px;
  flex-grow: 1;
}

.app-button {
  padding: 10px 25px;
  background: white;
  border: 1px solid #1890ff;
  color: #1890ff;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.app-button:hover {
  background: #1890ff;
  color: white;
}

/* Responsive Styles */
@media (max-width: 1240px) {
  .app-carousel,
  .app-title {
    width: 90%;
  }

  .carousel-arrow.left {
    left: -20px;
  }

  .carousel-arrow.right {
    right: -20px;
  }
}

@media (max-width: 768px) {
  .app-card {
    width: calc(50% - 20px);
    min-width: calc(50% - 20px);
  }

  .hot-tag {
    width: 50px;
    height: 50px;
  }

  .hot-text {
    width: 25px;
    height: 25px;
    top: 12px;
    right: 8px;
  }
}

@media (max-width: 480px) {
  .app-card {
    width: calc(100% - 20px);
    min-width: calc(100% - 20px);
  }

  .app-title p {
    font-size: 28px;
  }

  .app-name {
    font-size: 20px;
  }

  .app-description {
    font-size: 14px;
  }
}
.app-tabs-container {
  width: 100%;
  margin: 60px auto 0;
  background: white;
  height: 80px;
  position: relative;
}

.app-tabs {
  display: flex;
  padding: 0 40px;
  height: 100%;
  align-items: center;
}

.tab-item {
  padding: 10px 20px;
  margin-left: 100px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.tab-item.active {
  color: #1890ff;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #1890ff;
}

.tab-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e8e8e8;
}

/* New Grid Styles */
.app-grid {
  width: 1200px;
  margin: 30px auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.grid-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 25px;
  display: flex;
  height: 281px;
}

.grid-icon {
  width: 60px;
  height: 60px;
  margin-right: 20px;
  flex-shrink: 0;
}

.grid-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.grid-content {
  display: flex;
  flex-direction: column;
}

.grid-title {
  font-size: 20px;
  color: #333;
  margin: 0 0 15px 0;
  text-align: left;
}

.grid-description {
  font-size: 14px;
  color: #999999;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
  text-align: left;
}

.grid-button {
  width: 128px;
  height: 38px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
}

.grid-button:hover {
  background: #40a9ff;
}
</style>